<script setup lang="ts">
import axios from 'axios'
const activeName = ref('one')
// 用户投诉
const myComplainForm = ref([
  {
    complainid: null,
    orderid: null,
    complain: null,
    image: null,
    reply: null,
    createtime: null,
    supplement: null,
    state: null
  }
])
// 获取用户投诉信息
function getComplaint() {
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/getallbyuserid',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    },
    params: {
      userid: window.localStorage.getItem('userID')
    }
  }).then(
    (res) => {
      // console.log("获取用户投诉信息成功");
      console.log(res.data.data)
      myComplainForm.value = res.data.data
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取商家信息失败,请刷新网页')
    }
  )
}
getComplaint()
const adminaChecking = ref([])
const adminPass = ref([])
const adminaNopass = ref([])
const restaurantPass = ref([])
const restaurantNopass = ref([])
function complaintFormClassification() {
  myComplainForm.value.forEach((item) => {
    if (item.state == 0) {
      adminaChecking.value.push(item)
    } else if (item.state == 1) {
      adminPass.value.push(item)
    } else if (item.state == 2) {
      adminaNopass.value.push(item)
    } else if (item.state == 3) {
      restaurantPass.value.push(item)
    } else if (item.state == 4) {
      restaurantNopass.value.push(item)
    }
  })
}
setTimeout(() => {
  complaintFormClassification()
  console.log(adminPass.value)
}, 2000)
const isRecomplain = ref(false)
// 用户再次投诉
function Recomplaint(complainidParam: any, orderidParam: any) {
  isRecomplain.value = true
  // console.log(111);

  // axios({
  //     method: 'post',
  //     url: '/complain/retry',
  //     headers: {
  //         "Content-Type": "application/octet-stream",
  //         'Authorization': window.localStorage.getItem('Usertoken'),
  //     },
  //     params: {
  //         complainid: complainidParam,
  //         orderid: orderidParam
  //         // complain:
  //         // image:
  //     }
  // }).then(res => {
  //     // console.log("获取用户投诉信息成功");
  //     console.log(res.data.data);
  //     myComplainForm.value = res.data.data
  // }, err => {
  //     console.log(err);
  //     ElMessage.error("获取商家信息失败,请刷新网页")
  // })
}
const orderDetailForm = ref([
  {
    orderdetailid: 19,
    orderid: 4,
    foodid: '炸鸡',
    image: 'https://hiram.oss-cn-chengdu.aliyuncs.com/coffee.jpg',
    price: 2.0,
    number: 2
  }
])

const orderForm = ref({
  orderid: 3,
  userid: 3,
  reviewid: 18,
  restaurantid: '3',
  complainid: 15,
  price: 100.0,
  createtime: '2024-04-26 20:22:48',
  state: 0,
  way: 1,
  orders: null,
  person: 3
})

// 根据订单ID得到订单
function getOrder(orderidParam: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/order/findbyId',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    },
    params: {
      orderid: orderidParam
    }
  }).then(
    (res) => {
      orderForm.value = res.data.data
      console.log(orderForm.value)
      getOrderDetial(orderidParam)
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取商家信息失败,请刷新网页')
    }
  )
}
// 根据订单ID获取订单详情
function getOrderDetial(orderidParam: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/order/getuserorderdetail',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    },
    params: {
      id: orderidParam
    }
  }).then(
    (res) => {
      orderDetailForm.value = res.data.data
      console.log(orderDetailForm.value)
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取商家信息失败,请刷新网页')
    }
  )
}
//获取商家信息
</script>

<template>
  <div class="order-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="管理员审核中" name="one">
        <el-card style="width: 100%">
          <template #header>
            <div>
              <span>我的投诉</span>
            </div>
          </template>
          <div class="cards-container">
            <div v-for="p in adminaChecking" class="text item">
              <el-card style="margin-bottom: 30px">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <h4>投诉ID:{{ p.complainid }}</h4>
                    <h4>订单ID:{{ p.orderid }}</h4>
                    <p></p>
                    <h5>发起时间:{{ p.createtime }}</h5>
                  </div>
                </template>
                <div class="container">
                  <div class="left">
                    <div class="image-container">
                      <div class="item_img">
                        <img :src="p.image" style="width: 285px; height: 285px" />
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div>
                      <el-card style="width: 320px" shadow="hover">
                        <div style="display: flex">
                          <p>
                            投诉状态:&nbsp;<el-tag size="default" type="info">管理员审核中</el-tag>
                          </p>
                        </div>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>补偿金额:{{ p.supplement }}</h5>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>投诉内容:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.complain }}</h4>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>商家回复:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.reply }}</h4>
                      </el-card>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <template #footer>没有更多投诉了...</template>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="商家审核中" name="two">
        <el-card style="width: 100%">
          <template #header>
            <div>
              <span>我的投诉</span>
            </div>
          </template>
          <div class="cards-container">
            <div v-for="p in adminPass" class="text item">
              <el-card style="margin-bottom: 30px">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <h4>投诉ID:{{ p.complainid }}</h4>
                    <h4>订单ID:{{ p.orderid }}</h4>
                    <p></p>
                    <h5>发起时间:{{ p.createtime }}</h5>
                  </div>
                </template>
                <div class="container">
                  <div class="left">
                    <div class="image-container">
                      <div class="item_img">
                        <img :src="p.image" style="width: 285px; height: 285px" />
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div>
                      <el-card style="width: 320px" shadow="hover">
                        <div style="display: flex">
                          <p>
                            投诉状态:&nbsp;<el-tag size="default" type="warning"
                              >商家审核中......</el-tag
                            >
                          </p>
                        </div>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>补偿金额:{{ p.supplement }}</h5>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>投诉内容:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.complain }}</h4>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>商家回复:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.reply }}</h4>
                      </el-card>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <template #footer>没有更多投诉了...</template>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="管理员驳回" name="three">
        <el-table :data="adminaNopass" :border="false" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div style="margin-left: 88px">
                <p>投诉内容：{{ props.row.complain }}</p>
                <el-divider />
                <p>商家回复：{{ props.row.reply }}</p>
                <el-divider />
                <p>赔偿金额：{{ props.row.supplement }}</p>
                <el-divider />
                <el-descriptions title="投诉图片" :column="1" direction="horizontal">
                  <el-descriptions-item>
                    <div>
                      <el-image style="width: 180px; height: 180px" :src="props.row.image" />
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="投诉ID"
            prop="complainid"
            type="index"
          />
          <el-table-column align="center" width="120" label="订单ID" prop="orderid" />
          <el-table-column align="center" width="200" label="发起时间" prop="createtime" />
          <el-table-column align="center" width="150" label="状态" prop="state">
            <template #default="{ row }">
              <el-tag size="small" type="info" v-show="row.state == 0">管理员审核中...</el-tag>
              <el-tag size="small" type="warning" v-show="row.state == 1">商家审核中...</el-tag>
              <el-tag size="small" type="danger" v-show="row.state == 2">管理员审核未通过</el-tag>
              <el-tag size="small" type="success" v-show="row.state == 3">商家审核已通过</el-tag>
              <el-tag size="small" type="danger" v-show="row.state == 4">商家审核未通过</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="商家审核已通过" name="four">
        <el-card style="width: 100%">
          <template #header>
            <div>
              <span>我的投诉</span>
            </div>
          </template>
          <div class="cards-container">
            <div v-for="p in restaurantPass" class="text item">
              <el-card style="margin-bottom: 30px">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <h4>投诉ID:{{ p.complainid }}</h4>
                    <h4>订单ID:{{ p.orderid }}</h4>
                    <p></p>
                    <h5>发起时间:{{ p.createtime }}</h5>
                  </div>
                </template>
                <div class="container">
                  <div class="left">
                    <div class="image-container">
                      <div class="item_img">
                        <img :src="p.image" style="width: 250px; height: 270px" />
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div>
                      <el-card style="width: 320px" shadow="hover">
                        <div style="display: flex">
                          <p>
                            投诉状态:&nbsp;<el-tag size="default" type="success"
                              >商家审核已通过</el-tag
                            >
                          </p>
                        </div>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>补偿金额:{{ p.supplement }}</h5>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>投诉内容:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.complain }}</h4>
                      </el-card>
                      <el-card style="width: 320px" shadow="hover">
                        <h5>商家回复:</h5>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ p.reply }}</h4>
                      </el-card>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <template #footer>没有更多投诉了...</template>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="商家驳回" name="five">
        <el-table :data="restaurantNopass" :border="false" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <div style="margin-left: 88px">
                <p>投诉内容：{{ props.row.complain }}</p>
                <el-divider />
                <p>商家回复：{{ props.row.reply }}</p>
                <el-divider />
                <p>赔偿金额：{{ props.row.supplement }}</p>
                <el-divider />
                <el-descriptions title="投诉图片" :column="1" direction="horizontal">
                  <el-descriptions-item>
                    <div>
                      <el-image style="width: 180px; height: 180px" :src="props.row.image" />
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="投诉ID"
            prop="complainid"
            type="index"
          />
          <el-table-column align="center" width="120" label="订单ID" prop="orderid" />
          <el-table-column align="center" width="200" label="发起时间" prop="createtime" />
          <el-table-column align="center" width="150" label="状态" prop="state">
            <template #default="{ row }">
              <!-- <el-tag size="small" type='info' v-show="row.state == 0">管理员审核中...</el-tag>
                            <el-tag size="small" type='warning' v-show="row.state == 1">商家审核中...</el-tag>
                            <el-tag size="small" type='danger' v-show="row.state == 2">管理员审核未通过</el-tag>
                            <el-tag size="small" type='success' v-show="row.state == 3">商家审核已通过</el-tag> -->
              <el-tag size="small" type="danger" v-show="row.state == 4">商家审核未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" width="250" label="操作" prop="createtime">
            <template #default="{ row }">
              <el-button plain @click="Recomplaint(row.complainid, row.orderid)"
                >重新投诉</el-button
              >
              <el-button plain @click="getOrder(row.orderid)">订单详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 再次投诉 -->
    <el-dialog v-model="isRecomplain" title="投诉" width="60%">
      <el-card>
        <p>餐厅名称：{{}}</p>
        <el-table :data="orderDetailForm">
          <el-table-column align="center" property="orderdetailid" label="图片" width="120">
            <template #default="{ row }">
              <el-image style="width: 100px; height: 100px" :src="row.image" />
            </template>
          </el-table-column>
          <el-table-column align="center" property="orderid" label="订单号" width="80" />
          <el-table-column align="center" property="foodid" label="菜品名称" width="80" />
          <el-table-column align="center" property="price" label="总价" width="60" />
          <el-table-column align="center" property="number" label="数量" width="60" />
        </el-table>
      </el-card>

      <div style="margin: 40px 0"></div>
      <!-- <el-form label-position="left" label-width="auto" :model="complainForm" style="max-width: 600px">
                <el-form-item label="投诉内容">
                    <el-input v-model="complainForm.complain" maxlength="50" placeholder="请输入投诉内容" show-word-limit
                        type="textarea" />
                </el-form-item>
                <el-form-item label="投诉图片">
                    <el-upload class="avatar-uploader" action="http://localhost:8080/data/image" :show-file-list="false"
                        :on-success="handleComplainAvatarSuccess" :before-upload="beforeComplainAvatarUpload" size="large">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isComplain = false">返回</el-button>
                    <el-button @click="addComplain">发表投诉</el-button>
                </div>
            </template> -->
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.order-container {
  padding: 10px 30px;
}

// 左右开始
.container {
  display: flex;
  // align-items: center;
}

.left {
  flex-shrink: 0;
  /* 防止图片被压缩 */
}

.right {
  margin-left: 20px;
  /* 可以根据具体情况设置间距 */
}

// 左右结束

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* 设置子元素之间的间隔 */
}

.text.item {
  flex: 0 0 calc(50% - 20px);
  /* 设置每个el-card的固定宽度 */
  max-width: calc(50% - 20px);
  /* 设置每个el-card的最大宽度，减去间隔 */
  height: 420px;
  /* 设置每个el-card的固定高度 */
  margin-bottom: 5px;
  /* 添加下边距 */
  overflow: auto;
  /* 如果内容溢出，则显示滚动条 */
}

/* 如果需要，移除最后一个元素的底部边距 */
.text.item:last-child {
  margin-bottom: 0;
}
</style>
